<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="commons/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="${ctx }/static/js/jquery.js"></script>
<script src="${ctx }/static/js/pintuer.js"></script>
<script src="${ctx }/static/js/jquery-1.11.1.min.js"></script>
</head>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style type="text/css">
			html,body{height: 100%;margin: 0;padding: 0;}
			a{text-decoration:none}
			.nav{
				height: 60px;background-color: #38B3D5;
			}
			.nav1{
				color:#EBF8FB;
				line-height: 60px;
				height: 60px;
				float: left;
				margin-left: 5%;
				font-size: 20px;
			}
			.nav1 h2{
				margin: 0;
				font-weight: bolder;
				
			}
			.nav2{
				color: #EBF8FB;
				text-align: center;
				float: left;
				height: 50px;
				line-height: 60px;
				width: 85%;
				font-size: 22px;
			}
			.container{
				display: -webkit-box;
				-webkit-box-orient: vertical;/*纵向布局*/
				height: 100%;
			}
			.content{
				-webkit-box-flex: 1;
				overflow: auto;
				background-color: #F0EFF5;
			}
			.tx{
				width: 95%;
				background-color: white;
				height: 90px;
				line-height: 90px;
				padding-left: 5%;
				color: #959595;
				font-weight: bolder;
			}
			.tx-logo{
				height: 70px;
				width: 70px;
				float: right;
				margin-right: 55%;
				margin-top:35px;
			}

			.tx-fh{
				height: 25px;
				float: right;
				margin-right: -240px;
				margin-top: 35px;
			}			
		</style>
	</head>
	<body>
	<form method="post" class="form-x" action="doxxdz">
		<div class="container">
			<div class="nav">
				<div class="nav1"><h2><a href="javascript:history.go(-1);"><</a></h2></div>
				<div class="nav2">
					详细地址
				</div>
			</div>
			<div class="content">
				<div class="tx">
					详细地址
					<div class="tx-logo">
					
					<input value="${userMessage.getAddress() }" name="xxdz" id="b">
							
				             省：
       				 <select style="width: 100px" id="pre" onchange="chg(this);">
            			<option>请选择</option>
        			 </select>
        			              市：
        			 <select style="width: 100px" id="city"  onchange="chg2(this)" ></select>
       					 区：
                     <select style="width: 100px" id="area" onchange="citls()"></select>
					</div>
					<div class="tx-fh">
						<button type="submit">保存</button>
					</div>
			
			 
				</div>
			
				
		</div>
		</div>
		</form>

	</body>
 <script>
 var pres = ["北京", "上海", "山东"]; //直接声明Array
 //声明市
var cities = [
    ["东城", "昌平", "海淀"],
    ["浦东", "高区"],
    ["济南", "青岛"]
];
var areas = [
        [
            ["东城1", "东城2", "东城3"],
            ["昌平1", "昌平2", "昌平3"],
            ["海淀1", "海淀2", "海淀3"]
        ],
        [
            ["浦东1", "浦东2", "浦东3"],
            ["高区1", "高区2", "高区3"]
        ],
        [
            ["济南1", "济南2"],
            ["青岛1", "青岛2"]
        ]
    ]

  $('#pre').on('click',function () {
	    var pre=  $('#pre').val();
	    var a=pres[pre];
	   $("#b").val(a);
	})

	$('#city').on('click',function (){
	var pre=  $('#pre').val();
	var city= $('#city').val();
	var aa=cities[pre][city];
     $('#b').val(pres[pre]+aa);
})
 	function citls(){
		var pre=  $('#pre').val();
		var city= $('#city').val();
		var area= $('#area').val();
		var aaa=areas[pre][city][area];
		$('#b').val(pres[pre]+cities[pre][city]+aaa);
	} 
         //声明省
       
            //设置一个省的公共下标
        var pIndex = -1;
        var preEle = document.getElementById("pre");
     
        var cityEle = document.getElementById("city");
        var areaEle = document.getElementById("area");
         //先设置省的值
        for (var i = 0; i < pres.length; i++) {
            //声明option.<option value="pres[i]">Pres[i]</option>
            var op = new Option(pres[i], i);
            //添加
            preEle.options.add(op);
        }
        function chg(obj) {
            if (obj.value == -1) {
                cityEle.options.length = 0;
                areaEle.options.length = 0;
            }
            //获取值
            var val = obj.value;
            pIndex = obj.value;
            //获取ctiry
            var cs = cities[val];
            //获取默认区
            var as = areas[val][0];
            //先清空市
            cityEle.options.length = 0;
            areaEle.options.length = 0;
            for (var i = 0; i < cs.length; i++) {
                var op = new Option(cs[i], i);
                cityEle.options.add(op);
            }
            for (var i = 0; i < as.length; i++) {
                var op = new Option(as[i], i);
                areaEle.options.add(op);
            }
        }
        function chg2(obj) {
            var val = obj.selectedIndex;
            var as = areas[pIndex][val];
            areaEle.options.length = 0;
            for (var i = 0; i < as.length; i++) {
                var op = new Option(as[i], i);
                areaEle.options.add(op);
            }
        }
    </script>

	
</html>